<?php
if (!defined('BASEPATH')) exit('No direct script access allowed');
?>

<!-- JavaScript -->
<script type="text/javascript" src="<?= base_url() ?>js/wufoo.js"></script>
<script src="<?= base_url() ?>js/chosen.jquery.js" type="text/javascript"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="<?= base_url() ?>css/form/form.css" media="screen, tv, projection" title="Default" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>css/datepicker.css" media="screen, tv, projection" title="Default" />
<script type="text/javascript" src="<?= base_url() ?>js/datepicker.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>public/highcharts/js/highcharts.js"></script>
<link rel="stylesheet" href="<?php echo base_url() ?>css/chosen.css" />

	<style type="text/css">
		.chzn-container-single .chzn-single {
		  background: #fcfcfc;
		  /* background-color: #fff;
		  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
		  background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
		  background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
		  background-image: -o-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
		  background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
		  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
		  background-image: linear-gradient(top, #eeeeee 0%,#ffffff 50%); */
		  -webkit-border-radius: 4px;
		  -moz-border-radius   : 4px;
		  border-radius        : 4px;
		  -moz-background-clip   : padding;
		  -webkit-background-clip: padding-box;
		  background-clip        : padding-box;
		  border:thin solid #ccc;
		  display: block;
		  overflow: hidden;
		  white-space: nowrap;
		  position: relative;
		  height: 26px;
		  line-height: 26px;
		  padding: 0 0 0 8px;
		  color:#555;
		  text-decoration: none;
		  width: 450px;
		}
		.chzn-container-single .chzn-drop {
		  -webkit-border-radius: 0 0 4px 4px;
		  -moz-border-radius   : 0 0 4px 4px;
		  border-radius        : 0 0 4px 4px;
		  -moz-background-clip   : padding;
		  -webkit-background-clip: padding-box;
		  background-clip        : padding-box;
		  width: 450px;
		}
		.chzn-container .chzn-results .active-result {
		  cursor: pointer;
		  display: list-item;
		  width: 450px;
		}
		.chzn-container-active .chzn-single-with-drop {
		  width:450px;
		  border: 1px solid #aaa;
		  -webkit-box-shadow: 0 1px 0 #fff inset;
		  -moz-box-shadow   : 0 1px 0 #fff inset;
		  -o-box-shadow     : 0 1px 0 #fff inset;
		  box-shadow        : 0 1px 0 #fff inset;
		  background-color: #fcfcfc;
		  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
		  background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
		  background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
		  background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
		  background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%);
		  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
		  background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%);
		  -webkit-border-bottom-left-radius : 0;
		  -webkit-border-bottom-right-radius: 0;
		  -moz-border-radius-bottomleft : 0;
		  -moz-border-radius-bottomright: 0;
		  border-bottom-left-radius : 0;
		  border-bottom-right-radius: 0;
		}
	</style>
	<?
	$target = 0;
	$real = 0;
	foreach($graph_ind_utama->result() as $view){
		$target = $view->TARGET;	
		$real = $view->REALISASI;
		
	}
	?>
	
	
	<script type="text/javascript">
		

	var chart;
	$(document).ready(function() {
		chart = new Highcharts.Chart({
			chart: {
				renderTo: 'contentform2',
				defaultSeriesType: 'column'
			},
			title: {
				text: 'Target dan Realisasi Indikator Kinerja Utama'
			},
			// subtitle: {
				// text: 'Source: WorldClimate.com'
			// },
			xAxis: {
				categories: [
					'Target',
					'Realisasi'
				],
                title: {
					text: 'Indikator Kinerja Utama'
                }
			},
			yAxis: {
				min: 0,
				title: {
					text: 'Nilai'
				}
			},
			legend: {
				layout: 'vertical',
				backgroundColor: '#FFFFFF',
				align: 'left',
				verticalAlign: 'top',
				x: 235,
				y: 50,
				floating: true,
				shadow: true
			},
			tooltip: {
				formatter: function() {
					return this.x +', '+ this.y;
				}
			},
			plotOptions: {
				column: {
					pointPadding: 0.35,
					borderWidth: 0
				}
			},
				series: [{
				name: 'Target dan Realisasi',
				data: [<?=$target;?>,<?=$real;?>]

			}]
		});
	});
	
	function get_ind_utama(){
	
	var tahun = $("#tahun").val();
	$.ajax({
        url: "<?=base_url();?>index.php/indikator_utama/get_ind_utama/",
        global: false,
        type: "POST",
        async: false,
        dataType: "html",
        data: "tahun="+tahun, //the name of the $_POST variable and its value
        success: function (response) //'response' is the output provided by the controller method prova()
        {
		//counts the number of dynamically generated options
		var dynamic_options = $("*").index( $('.dynamic')[0] );
		// removes previously dynamically generated options if they exists (not equal to 0)
		if ( dynamic_options != (-1)) $(".dynamic").remove();
		$("#div_ind_utama").html(response);
		// $(".first").attr({selected: ' selected'});
	}
	});
	}

	</script>
	
<div id="container">
	<?
    //Setting Awal Value Jika Prosedur yang dilakukan adalah prosedur input biasa.
	$value = array(
		'id_satuan'				=> "",
		'nama_satuan'				=> "",
		'legend'				=> "Grafik Indikator Kinerja Utama",
		'info'					=> "Menampilkan Grafik Indikator Kinerja Utama",
		'act_form'				=> "indikator_utama/grafik_per_ind/"
	);
	
	//Setting Value pada form Jika melakukan prosedur Edit terhadap data tertentu.
	?>
	
	<?= form_open($value["act_form"],'class="" name="form_chart_indutama"'); ?>
	
	<fieldset class="fieldset">
	<legend class="legend">
		<?= $value["legend"] ?> |
	</legend>
	
	<div class="info">
		<div><?= $value["info"] ?></div>
	</div>
	<div>
		<?= anchor(site_url(''),img(array('src'=>'images/main/38.png','border'=>'0','alt'=>'')).' Kembali ke Halaman Utama',''); ?>
	</div>
	<!-- Konten -------------------------------------------------------------------------->
	<div id="contentform">
	       <ul>
			<li>
			       <label class="desc">Pilih Tahun Anggaran *</label>
				       <div>
						<? 
						//list tahun
						echo form_dropdown('tahun',$options_anggaran,$id_anggaran,'class="field select" onChange="get_ind_utama()" id="tahun"');	
						?>
				       </div>
				       
		       </li>
		       <p></p>
		       
		       <li>
			       <label class="desc">Pilih Indikator Utama *</label>
				       <div id="div_ind_utama">
					    <? 
						
		                $result_ind_utama['0'] = "-- Pilih Indikator Utama --";
						foreach($list_ind_utama->result() as $row){
							$result_ind_utama[$row->IDINDIKATOR_UTAMA] = $row->NAMA_INDIKATOR;
						}
							echo form_dropdown('ind_utama',$result_ind_utama,$ind_utama,'id="ind_utama" class="chzn-select" style="width:450px;" onChange="show_grafik()"');	
                        ?>
						
				       </div>
				       
		       </li>
		       <p></p>
		       
		       <li class="buttons">
			 <input id="saveForm" class="btTxt" type="submit" value="Tampilkan Grafik" />
		       </li>
			<p></p>
		       </br>
		       <li>
			   <? if($target != 0){?>
					<div id="contentform2" style="width: 600px; height: 310px; margin: 0 auto">
					</div>
				<?}?>	
			  </li>   
		       
	       </ul>
       </div>
		<!--<div id="contentform2">
		</div>-->
</fieldset>

<script type="text/javascript">
  $(".chzn-select").chosen();
  $(".chzn-select-deselect").chosen({allow_single_deselect:true});
</script>
<?= form_close(); ?>
</form>
</div><!--container-->
